<template>
  <view class="comment-item" :style="{marginLeft: depth * 20 + 'px'}">
    <!-- 评论头部 -->
    <view class="comment-header">
      <u-avatar :size="40" :src="'http://121.40.246.29/prod-api'+comment.communityUserNameDD.avatar" 
                @click="$emit('avatar-click', comment.commentsUserId)"></u-avatar>
      <view class="user-info">
        <text class="author-name">{{ comment.communityUserNameDD.userName }}</text>
        <text class="author-time">{{ comment.commentsCreateTime }}</text>
      </view>
      <view class="action-buttons">
        <view class="action-btn" @click="$emit('reply', comment)">
          <u-icon name="chat" size="20" color="#d4a373"></u-icon>
          <text class="action-text">回复</text>
        </view>
        <view class="action-btn" @click="$emit('like', comment.commentsId)">
          <u-icon name="thumb-up" size="20" color="#d4a373"></u-icon>
          <text class="action-text">{{ comment.commentsUp }}</text>
        </view>
      </view>
    </view>
    
    <!-- 评论内容 -->
    <view class="comment-content">
      {{ comment.commentsContent }}
    </view>
    
    <!-- 递归渲染回复 -->
    <view v-if="comment.replies && comment.replies.length > 0">
      <comment-node 
        v-for="(reply, j) in comment.replies" 
        :key="j"
        :comment="reply"
        :depth="depth + 1"
        @reply="$emit('reply', $event)"
        @like="$emit('like', $event)"
      />
    </view>
  </view>
</template>

<script>
export default {
  name: 'CommentNode',
  props: {
    comment: Object,
    depth: Number
  }
}
</script>

<style scoped>
.comment-item {
  background-color: #fff9f0;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 10px;
  border: 1px solid #e9d8c5;
  transition: all 0.3s;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.user-info {
  margin-left: 10px;
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 16px;
  color: #5e3a1e;
  font-weight: bold;
}

.author-time {
  font-size: 12px;
  color: #a68a64;
  margin-top: 2px;
}

.action-buttons {
  margin-left: auto;
  display: flex;
}

.action-btn {
  display: flex;
  align-items: center;
  margin-left: 15px;
  color: #d4a373;
}

.action-text {
  margin-left: 5px;
  font-size: 14px;
}

.comment-content {
  padding-left: 50px;
  margin-bottom: 10px;
  font-size: 15px;
  color: #5e4d3a;
  line-height: 1.5;
}
</style>